
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>IconFont</title>
    <link rel="stylesheet" href="demo.css">
    <script src="iconfont.js"></script>

    <style type="text/css">
        .icon {
          /* 通过设置 font-size 来改变图标大小 */
          width: 1em; height: 1em;
          /* 图标和文字相邻时，垂直对齐 */
          vertical-align: -0.15em;
          /* 通过设置 color 来改变 SVG 的颜色/fill */
          fill: currentColor;
          /* path 和 stroke 溢出 viewBox 部分在 IE 下会显示
             normalize.css 中也包含这行 */
          overflow: hidden;
        }

    </style>
</head>
<body>
    <div class="main markdown">
        <h1>IconFont 图标</h1>
        <ul class="icon_lists clear">
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-number_"></use>
                    </svg>
                    <div class="name">number_6</div>
                    <div class="fontclass">#icon-number_</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-number_1"></use>
                    </svg>
                    <div class="name">number_7</div>
                    <div class="fontclass">#icon-number_1</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-number_2"></use>
                    </svg>
                    <div class="name">number_9</div>
                    <div class="fontclass">#icon-number_2</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-number_3"></use>
                    </svg>
                    <div class="name">number_0</div>
                    <div class="fontclass">#icon-number_3</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-number_4"></use>
                    </svg>
                    <div class="name">number_3</div>
                    <div class="fontclass">#icon-number_4</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-number_5"></use>
                    </svg>
                    <div class="name">number_1</div>
                    <div class="fontclass">#icon-number_5</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-number_6"></use>
                    </svg>
                    <div class="name">number_4</div>
                    <div class="fontclass">#icon-number_6</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-number_7"></use>
                    </svg>
                    <div class="name">number_8</div>
                    <div class="fontclass">#icon-number_7</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-number_punctuation"></use>
                    </svg>
                    <div class="name">number_punctuation</div>
                    <div class="fontclass">#icon-number_punctuation</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-number_8"></use>
                    </svg>
                    <div class="name">number_5</div>
                    <div class="fontclass">#icon-number_8</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-number_9"></use>
                    </svg>
                    <div class="name">number_2</div>
                    <div class="fontclass">#icon-number_9</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-add"></use>
                    </svg>
                    <div class="name">add</div>
                    <div class="fontclass">#icon-add</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-column"></use>
                    </svg>
                    <div class="name">3column</div>
                    <div class="fontclass">#icon-column</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-column1"></use>
                    </svg>
                    <div class="name">4column</div>
                    <div class="fontclass">#icon-column1</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-air-drop"></use>
                    </svg>
                    <div class="name">air-drop</div>
                    <div class="fontclass">#icon-air-drop</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-add-r"></use>
                    </svg>
                    <div class="name">add-r</div>
                    <div class="fontclass">#icon-add-r</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-add-s"></use>
                    </svg>
                    <div class="name">add-s</div>
                    <div class="fontclass">#icon-add-s</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-arrow-double-left"></use>
                    </svg>
                    <div class="name">arrow-double-left</div>
                    <div class="fontclass">#icon-arrow-double-left</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-app"></use>
                    </svg>
                    <div class="name">app</div>
                    <div class="fontclass">#icon-app</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-also-loan"></use>
                    </svg>
                    <div class="name">also-loan</div>
                    <div class="fontclass">#icon-also-loan</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-ascending"></use>
                    </svg>
                    <div class="name">ascending</div>
                    <div class="fontclass">#icon-ascending</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-air"></use>
                    </svg>
                    <div class="name">air</div>
                    <div class="fontclass">#icon-air</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-arrow-double-right"></use>
                    </svg>
                    <div class="name">arrow-double-right</div>
                    <div class="fontclass">#icon-arrow-double-right</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-atm"></use>
                    </svg>
                    <div class="name">atm</div>
                    <div class="fontclass">#icon-atm</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-atm-away"></use>
                    </svg>
                    <div class="name">atm-away</div>
                    <div class="fontclass">#icon-atm-away</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-bad-r"></use>
                    </svg>
                    <div class="name">bad-r</div>
                    <div class="fontclass">#icon-bad-r</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-attendance"></use>
                    </svg>
                    <div class="name">attendance</div>
                    <div class="fontclass">#icon-attendance</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-bad"></use>
                    </svg>
                    <div class="name">bad</div>
                    <div class="fontclass">#icon-bad</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-back-r"></use>
                    </svg>
                    <div class="name">back-r</div>
                    <div class="fontclass">#icon-back-r</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-back"></use>
                    </svg>
                    <div class="name">back</div>
                    <div class="fontclass">#icon-back</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-bank-card"></use>
                    </svg>
                    <div class="name">bank-card</div>
                    <div class="fontclass">#icon-bank-card</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-bar-chart"></use>
                    </svg>
                    <div class="name">bar-chart</div>
                    <div class="fontclass">#icon-bar-chart</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-box"></use>
                    </svg>
                    <div class="name">box</div>
                    <div class="fontclass">#icon-box</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-building"></use>
                    </svg>
                    <div class="name">building</div>
                    <div class="fontclass">#icon-building</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-business"></use>
                    </svg>
                    <div class="name">business</div>
                    <div class="fontclass">#icon-business</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-bill"></use>
                    </svg>
                    <div class="name">bill</div>
                    <div class="fontclass">#icon-bill</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-calculator"></use>
                    </svg>
                    <div class="name">calculator</div>
                    <div class="fontclass">#icon-calculator</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-calendar"></use>
                    </svg>
                    <div class="name">calendar</div>
                    <div class="fontclass">#icon-calendar</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-camera"></use>
                    </svg>
                    <div class="name">camera</div>
                    <div class="fontclass">#icon-camera</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-businesscard"></use>
                    </svg>
                    <div class="name">businesscard</div>
                    <div class="fontclass">#icon-businesscard</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-car"></use>
                    </svg>
                    <div class="name">car</div>
                    <div class="fontclass">#icon-car</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-chat"></use>
                    </svg>
                    <div class="name">chat</div>
                    <div class="fontclass">#icon-chat</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-cangneishicao"></use>
                    </svg>
                    <div class="name">cangneishicao</div>
                    <div class="fontclass">#icon-cangneishicao</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-check"></use>
                    </svg>
                    <div class="name">check</div>
                    <div class="fontclass">#icon-check</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-checkbox-selected"></use>
                    </svg>
                    <div class="name">checkbox-selected</div>
                    <div class="fontclass">#icon-checkbox-selected</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-Chinese"></use>
                    </svg>
                    <div class="name">Chinese</div>
                    <div class="fontclass">#icon-Chinese</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-checkbox"></use>
                    </svg>
                    <div class="name">checkbox</div>
                    <div class="fontclass">#icon-checkbox</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-clock"></use>
                    </svg>
                    <div class="name">clock</div>
                    <div class="fontclass">#icon-clock</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-close"></use>
                    </svg>
                    <div class="name">close</div>
                    <div class="fontclass">#icon-close</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-commodity"></use>
                    </svg>
                    <div class="name">commodity</div>
                    <div class="fontclass">#icon-commodity</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-colthes"></use>
                    </svg>
                    <div class="name">colthes</div>
                    <div class="fontclass">#icon-colthes</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-compare"></use>
                    </svg>
                    <div class="name">compare</div>
                    <div class="fontclass">#icon-compare</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-compass"></use>
                    </svg>
                    <div class="name">compass</div>
                    <div class="fontclass">#icon-compass</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-complain"></use>
                    </svg>
                    <div class="name">complain</div>
                    <div class="fontclass">#icon-complain</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-complete-r"></use>
                    </svg>
                    <div class="name">complete-r</div>
                    <div class="fontclass">#icon-complete-r</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-complete"></use>
                    </svg>
                    <div class="name">complete</div>
                    <div class="fontclass">#icon-complete</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-courier"></use>
                    </svg>
                    <div class="name">courier</div>
                    <div class="fontclass">#icon-courier</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-copy"></use>
                    </svg>
                    <div class="name">copy</div>
                    <div class="fontclass">#icon-copy</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-CSR"></use>
                    </svg>
                    <div class="name">CSR</div>
                    <div class="fontclass">#icon-CSR</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-create-bill"></use>
                    </svg>
                    <div class="name">create-bill</div>
                    <div class="fontclass">#icon-create-bill</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-cut"></use>
                    </svg>
                    <div class="name">cut</div>
                    <div class="fontclass">#icon-cut</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-dashboard"></use>
                    </svg>
                    <div class="name">dashboard</div>
                    <div class="fontclass">#icon-dashboard</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-delete"></use>
                    </svg>
                    <div class="name">delete</div>
                    <div class="fontclass">#icon-delete</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-delivery"></use>
                    </svg>
                    <div class="name">delivery</div>
                    <div class="fontclass">#icon-delivery</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-customs"></use>
                    </svg>
                    <div class="name">customs</div>
                    <div class="fontclass">#icon-customs</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-descending"></use>
                    </svg>
                    <div class="name">descending</div>
                    <div class="fontclass">#icon-descending</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-dialog"></use>
                    </svg>
                    <div class="name">dialog</div>
                    <div class="fontclass">#icon-dialog</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-diamond"></use>
                    </svg>
                    <div class="name">diamond</div>
                    <div class="fontclass">#icon-diamond</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-download"></use>
                    </svg>
                    <div class="name">download</div>
                    <div class="fontclass">#icon-download</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-ding"></use>
                    </svg>
                    <div class="name">ding</div>
                    <div class="fontclass">#icon-ding</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-drop"></use>
                    </svg>
                    <div class="name">drop</div>
                    <div class="fontclass">#icon-drop</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-dollar"></use>
                    </svg>
                    <div class="name">dollar</div>
                    <div class="fontclass">#icon-dollar</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-duihua"></use>
                    </svg>
                    <div class="name">duihua</div>
                    <div class="fontclass">#icon-duihua</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-edit"></use>
                    </svg>
                    <div class="name">edit</div>
                    <div class="fontclass">#icon-edit</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-electronics"></use>
                    </svg>
                    <div class="name">electronics</div>
                    <div class="fontclass">#icon-electronics</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-English"></use>
                    </svg>
                    <div class="name">English</div>
                    <div class="fontclass">#icon-English</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-error-s"></use>
                    </svg>
                    <div class="name">error-s</div>
                    <div class="fontclass">#icon-error-s</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-enclosure"></use>
                    </svg>
                    <div class="name">enclosure</div>
                    <div class="fontclass">#icon-enclosure</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-error-r"></use>
                    </svg>
                    <div class="name">error-r</div>
                    <div class="fontclass">#icon-error-r</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-exclamatory-mark-r"></use>
                    </svg>
                    <div class="name">exclamatory-mark-r</div>
                    <div class="fontclass">#icon-exclamatory-mark-r</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-exchange"></use>
                    </svg>
                    <div class="name">exchange</div>
                    <div class="fontclass">#icon-exchange</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-exclamatory-mark-t"></use>
                    </svg>
                    <div class="name">exclamatory-mark-t</div>
                    <div class="fontclass">#icon-exclamatory-mark-t</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-exclamatory-mark"></use>
                    </svg>
                    <div class="name">exclamatory-mark</div>
                    <div class="fontclass">#icon-exclamatory-mark</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-extend-r"></use>
                    </svg>
                    <div class="name">extend-r</div>
                    <div class="fontclass">#icon-extend-r</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-extend"></use>
                    </svg>
                    <div class="name">extend</div>
                    <div class="fontclass">#icon-extend</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-exit-fullscreen"></use>
                    </svg>
                    <div class="name">exit-fullscreen</div>
                    <div class="fontclass">#icon-exit-fullscreen</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-finance"></use>
                    </svg>
                    <div class="name">finance</div>
                    <div class="fontclass">#icon-finance</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-favorites"></use>
                    </svg>
                    <div class="name">favorites</div>
                    <div class="fontclass">#icon-favorites</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-filter"></use>
                    </svg>
                    <div class="name">filter</div>
                    <div class="fontclass">#icon-filter</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-first-page"></use>
                    </svg>
                    <div class="name">first-page</div>
                    <div class="fontclass">#icon-first-page</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-flash-lamp-auto"></use>
                    </svg>
                    <div class="name">flash-lamp-auto</div>
                    <div class="fontclass">#icon-flash-lamp-auto</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-flash-lamp-off"></use>
                    </svg>
                    <div class="name">flash-lamp-off</div>
                    <div class="fontclass">#icon-flash-lamp-off</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-flash-lamp"></use>
                    </svg>
                    <div class="name">flash-lamp</div>
                    <div class="fontclass">#icon-flash-lamp</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-forward-r"></use>
                    </svg>
                    <div class="name">forward-r</div>
                    <div class="fontclass">#icon-forward-r</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-forbidden"></use>
                    </svg>
                    <div class="name">forbidden</div>
                    <div class="fontclass">#icon-forbidden</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-forward-sorting"></use>
                    </svg>
                    <div class="name">forward-sorting</div>
                    <div class="fontclass">#icon-forward-sorting</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-fullscreen"></use>
                    </svg>
                    <div class="name">fullscreen</div>
                    <div class="fontclass">#icon-fullscreen</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-forward"></use>
                    </svg>
                    <div class="name">forward</div>
                    <div class="fontclass">#icon-forward</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-gifts"></use>
                    </svg>
                    <div class="name">gifts</div>
                    <div class="fontclass">#icon-gifts</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-free"></use>
                    </svg>
                    <div class="name">free</div>
                    <div class="fontclass">#icon-free</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-folder"></use>
                    </svg>
                    <div class="name">folder</div>
                    <div class="fontclass">#icon-folder</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-good-r"></use>
                    </svg>
                    <div class="name">good-r</div>
                    <div class="fontclass">#icon-good-r</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-good"></use>
                    </svg>
                    <div class="name">good</div>
                    <div class="fontclass">#icon-good</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-group"></use>
                    </svg>
                    <div class="name">group</div>
                    <div class="fontclass">#icon-group</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-home"></use>
                    </svg>
                    <div class="name">home</div>
                    <div class="fontclass">#icon-home</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-history"></use>
                    </svg>
                    <div class="name">history</div>
                    <div class="fontclass">#icon-history</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-image-text"></use>
                    </svg>
                    <div class="name">image-text</div>
                    <div class="fontclass">#icon-image-text</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-horizontal-retractio"></use>
                    </svg>
                    <div class="name">horizontal-retractio</div>
                    <div class="fontclass">#icon-horizontal-retractio</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-horizontal-expansion"></use>
                    </svg>
                    <div class="name">horizontal-expansion</div>
                    <div class="fontclass">#icon-horizontal-expansion</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-horn"></use>
                    </svg>
                    <div class="name">horn</div>
                    <div class="fontclass">#icon-horn</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-import"></use>
                    </svg>
                    <div class="name">import</div>
                    <div class="fontclass">#icon-import</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-image"></use>
                    </svg>
                    <div class="name">image</div>
                    <div class="fontclass">#icon-image</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-info-r"></use>
                    </svg>
                    <div class="name">info-r</div>
                    <div class="fontclass">#icon-info-r</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-info"></use>
                    </svg>
                    <div class="name">info</div>
                    <div class="fontclass">#icon-info</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-information"></use>
                    </svg>
                    <div class="name">information</div>
                    <div class="fontclass">#icon-information</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-key"></use>
                    </svg>
                    <div class="name">key</div>
                    <div class="fontclass">#icon-key</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-international"></use>
                    </svg>
                    <div class="name">international</div>
                    <div class="fontclass">#icon-international</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-keyboard"></use>
                    </svg>
                    <div class="name">keyboard</div>
                    <div class="fontclass">#icon-keyboard</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-last-page"></use>
                    </svg>
                    <div class="name">last-page</div>
                    <div class="fontclass">#icon-last-page</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-increase"></use>
                    </svg>
                    <div class="name">increase</div>
                    <div class="fontclass">#icon-increase</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-left"></use>
                    </svg>
                    <div class="name">left</div>
                    <div class="fontclass">#icon-left</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-letter"></use>
                    </svg>
                    <div class="name">letter</div>
                    <div class="fontclass">#icon-letter</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-lefy-exchange"></use>
                    </svg>
                    <div class="name">lefy-exchange</div>
                    <div class="fontclass">#icon-lefy-exchange</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-left-sorting"></use>
                    </svg>
                    <div class="name">left-sorting</div>
                    <div class="fontclass">#icon-left-sorting</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-light"></use>
                    </svg>
                    <div class="name">light</div>
                    <div class="fontclass">#icon-light</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-like"></use>
                    </svg>
                    <div class="name">like</div>
                    <div class="fontclass">#icon-like</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-link"></use>
                    </svg>
                    <div class="name">link</div>
                    <div class="fontclass">#icon-link</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-line"></use>
                    </svg>
                    <div class="name">line</div>
                    <div class="fontclass">#icon-line</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-load"></use>
                    </svg>
                    <div class="name">load</div>
                    <div class="fontclass">#icon-load</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-loading-"></use>
                    </svg>
                    <div class="name">loading-2</div>
                    <div class="fontclass">#icon-loading-</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-loading-1"></use>
                    </svg>
                    <div class="name">loading-1</div>
                    <div class="fontclass">#icon-loading-1</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-lock"></use>
                    </svg>
                    <div class="name">lock</div>
                    <div class="fontclass">#icon-lock</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-loan"></use>
                    </svg>
                    <div class="name">loan</div>
                    <div class="fontclass">#icon-loan</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-location"></use>
                    </svg>
                    <div class="name">location</div>
                    <div class="fontclass">#icon-location</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-logistics"></use>
                    </svg>
                    <div class="name">logistics</div>
                    <div class="fontclass">#icon-logistics</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-macbook"></use>
                    </svg>
                    <div class="name">macbook</div>
                    <div class="fontclass">#icon-macbook</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-logout"></use>
                    </svg>
                    <div class="name">logout</div>
                    <div class="fontclass">#icon-logout</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-minus-r"></use>
                    </svg>
                    <div class="name">minus-r</div>
                    <div class="fontclass">#icon-minus-r</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-map-"></use>
                    </svg>
                    <div class="name">map-1</div>
                    <div class="fontclass">#icon-map-</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-map-1"></use>
                    </svg>
                    <div class="name">map-2</div>
                    <div class="fontclass">#icon-map-1</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-mic"></use>
                    </svg>
                    <div class="name">mic</div>
                    <div class="fontclass">#icon-mic</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-minus"></use>
                    </svg>
                    <div class="name">minus</div>
                    <div class="fontclass">#icon-minus</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-mobile-Phone"></use>
                    </svg>
                    <div class="name">mobile-Phone</div>
                    <div class="fontclass">#icon-mobile-Phone</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-minus-s"></use>
                    </svg>
                    <div class="name">minus-s</div>
                    <div class="fontclass">#icon-minus-s</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-money"></use>
                    </svg>
                    <div class="name">money</div>
                    <div class="fontclass">#icon-money</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-monitor"></use>
                    </svg>
                    <div class="name">monitor</div>
                    <div class="fontclass">#icon-monitor</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-money-bill"></use>
                    </svg>
                    <div class="name">money-bill</div>
                    <div class="fontclass">#icon-money-bill</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-moneys"></use>
                    </svg>
                    <div class="name">moneys</div>
                    <div class="fontclass">#icon-moneys</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-more-transverse"></use>
                    </svg>
                    <div class="name">more-transverse</div>
                    <div class="fontclass">#icon-more-transverse</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-locker"></use>
                    </svg>
                    <div class="name">locker</div>
                    <div class="fontclass">#icon-locker</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-more-vertical"></use>
                    </svg>
                    <div class="name">more-vertical</div>
                    <div class="fontclass">#icon-more-vertical</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-nav-list"></use>
                    </svg>
                    <div class="name">nav-list</div>
                    <div class="fontclass">#icon-nav-list</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-news"></use>
                    </svg>
                    <div class="name">news</div>
                    <div class="fontclass">#icon-news</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-no-attendance"></use>
                    </svg>
                    <div class="name">no-attendance</div>
                    <div class="fontclass">#icon-no-attendance</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-not-sign"></use>
                    </svg>
                    <div class="name">not-sign</div>
                    <div class="fontclass">#icon-not-sign</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-navigation"></use>
                    </svg>
                    <div class="name">navigation</div>
                    <div class="fontclass">#icon-navigation</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-network"></use>
                    </svg>
                    <div class="name">network</div>
                    <div class="fontclass">#icon-network</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-notice"></use>
                    </svg>
                    <div class="name">notice</div>
                    <div class="fontclass">#icon-notice</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-office"></use>
                    </svg>
                    <div class="name">office</div>
                    <div class="fontclass">#icon-office</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-operation"></use>
                    </svg>
                    <div class="name">operation</div>
                    <div class="fontclass">#icon-operation</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-package"></use>
                    </svg>
                    <div class="name">package</div>
                    <div class="fontclass">#icon-package</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-organization"></use>
                    </svg>
                    <div class="name">organization</div>
                    <div class="fontclass">#icon-organization</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-open-package"></use>
                    </svg>
                    <div class="name">open-package</div>
                    <div class="fontclass">#icon-open-package</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-paste"></use>
                    </svg>
                    <div class="name">paste</div>
                    <div class="fontclass">#icon-paste</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-paly"></use>
                    </svg>
                    <div class="name">paly</div>
                    <div class="fontclass">#icon-paly</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-pause"></use>
                    </svg>
                    <div class="name">pause</div>
                    <div class="fontclass">#icon-pause</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-phone-r"></use>
                    </svg>
                    <div class="name">phone-r</div>
                    <div class="fontclass">#icon-phone-r</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-PDA"></use>
                    </svg>
                    <div class="name">PDA</div>
                    <div class="fontclass">#icon-PDA</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-pie-chart"></use>
                    </svg>
                    <div class="name">pie-chart</div>
                    <div class="fontclass">#icon-pie-chart</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-position"></use>
                    </svg>
                    <div class="name">position</div>
                    <div class="fontclass">#icon-position</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-power"></use>
                    </svg>
                    <div class="name">power</div>
                    <div class="fontclass">#icon-power</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-prine"></use>
                    </svg>
                    <div class="name">prine</div>
                    <div class="fontclass">#icon-prine</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-quality"></use>
                    </svg>
                    <div class="name">quality</div>
                    <div class="fontclass">#icon-quality</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-question-mark-r"></use>
                    </svg>
                    <div class="name">question-mark-r</div>
                    <div class="fontclass">#icon-question-mark-r</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-process"></use>
                    </svg>
                    <div class="name">process</div>
                    <div class="fontclass">#icon-process</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-ppt"></use>
                    </svg>
                    <div class="name">ppt</div>
                    <div class="fontclass">#icon-ppt</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-question-mark"></use>
                    </svg>
                    <div class="name">question-mark</div>
                    <div class="fontclass">#icon-question-mark</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-Raidobox-selectedRai"></use>
                    </svg>
                    <div class="name">Raidobox-selectedRai</div>
                    <div class="fontclass">#icon-Raidobox-selectedRai</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-red-packet"></use>
                    </svg>
                    <div class="name">red-packet</div>
                    <div class="fontclass">#icon-red-packet</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-radar"></use>
                    </svg>
                    <div class="name">radar</div>
                    <div class="fontclass">#icon-radar</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-refund"></use>
                    </svg>
                    <div class="name">refund</div>
                    <div class="fontclass">#icon-refund</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-register"></use>
                    </svg>
                    <div class="name">register</div>
                    <div class="fontclass">#icon-register</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-Raidobox"></use>
                    </svg>
                    <div class="name">Raidobox</div>
                    <div class="fontclass">#icon-Raidobox</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-resource"></use>
                    </svg>
                    <div class="name">resource</div>
                    <div class="fontclass">#icon-resource</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-refresh"></use>
                    </svg>
                    <div class="name">refresh</div>
                    <div class="fontclass">#icon-refresh</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-reverse-sorting"></use>
                    </svg>
                    <div class="name">reverse-sorting</div>
                    <div class="fontclass">#icon-reverse-sorting</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-relationship"></use>
                    </svg>
                    <div class="name">relationship</div>
                    <div class="fontclass">#icon-relationship</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-right-exchange"></use>
                    </svg>
                    <div class="name">right-exchange</div>
                    <div class="fontclass">#icon-right-exchange</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-rise"></use>
                    </svg>
                    <div class="name">rise</div>
                    <div class="fontclass">#icon-rise</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-right"></use>
                    </svg>
                    <div class="name">right</div>
                    <div class="fontclass">#icon-right</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-right-sorting"></use>
                    </svg>
                    <div class="name">right-sorting</div>
                    <div class="fontclass">#icon-right-sorting</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-RMB"></use>
                    </svg>
                    <div class="name">RMB</div>
                    <div class="fontclass">#icon-RMB</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-satisfy"></use>
                    </svg>
                    <div class="name">satisfy</div>
                    <div class="fontclass">#icon-satisfy</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-safe"></use>
                    </svg>
                    <div class="name">safe</div>
                    <div class="fontclass">#icon-safe</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-rule"></use>
                    </svg>
                    <div class="name">rule</div>
                    <div class="fontclass">#icon-rule</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-save"></use>
                    </svg>
                    <div class="name">save</div>
                    <div class="fontclass">#icon-save</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-scan"></use>
                    </svg>
                    <div class="name">scan</div>
                    <div class="fontclass">#icon-scan</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-schedule"></use>
                    </svg>
                    <div class="name">schedule</div>
                    <div class="fontclass">#icon-schedule</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-screwdriver"></use>
                    </svg>
                    <div class="name">screwdriver</div>
                    <div class="fontclass">#icon-screwdriver</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-search"></use>
                    </svg>
                    <div class="name">search</div>
                    <div class="fontclass">#icon-search</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-service"></use>
                    </svg>
                    <div class="name">service</div>
                    <div class="fontclass">#icon-service</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-security"></use>
                    </svg>
                    <div class="name">security</div>
                    <div class="fontclass">#icon-security</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-settlement"></use>
                    </svg>
                    <div class="name">settlement</div>
                    <div class="fontclass">#icon-settlement</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-setup"></use>
                    </svg>
                    <div class="name">setup</div>
                    <div class="fontclass">#icon-setup</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-share"></use>
                    </svg>
                    <div class="name">share</div>
                    <div class="fontclass">#icon-share</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-setting"></use>
                    </svg>
                    <div class="name">setting</div>
                    <div class="fontclass">#icon-setting</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-shield"></use>
                    </svg>
                    <div class="name">shield</div>
                    <div class="fontclass">#icon-shield</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-shopping-cart"></use>
                    </svg>
                    <div class="name">shopping-cart</div>
                    <div class="fontclass">#icon-shopping-cart</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-signed"></use>
                    </svg>
                    <div class="name">signed</div>
                    <div class="fontclass">#icon-signed</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-shrink"></use>
                    </svg>
                    <div class="name">shrink</div>
                    <div class="fontclass">#icon-shrink</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-shrink-r"></use>
                    </svg>
                    <div class="name">shrink-r</div>
                    <div class="fontclass">#icon-shrink-r</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-shoppingbag"></use>
                    </svg>
                    <div class="name">shoppingbag</div>
                    <div class="fontclass">#icon-shoppingbag</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-similar-product"></use>
                    </svg>
                    <div class="name">similar-product</div>
                    <div class="fontclass">#icon-similar-product</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-slide"></use>
                    </svg>
                    <div class="name">slide</div>
                    <div class="fontclass">#icon-slide</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-sort"></use>
                    </svg>
                    <div class="name">sort</div>
                    <div class="fontclass">#icon-sort</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-stop"></use>
                    </svg>
                    <div class="name">stop</div>
                    <div class="fontclass">#icon-stop</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-stock"></use>
                    </svg>
                    <div class="name">stock</div>
                    <div class="fontclass">#icon-stock</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-standard"></use>
                    </svg>
                    <div class="name">standard</div>
                    <div class="fontclass">#icon-standard</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-sorting"></use>
                    </svg>
                    <div class="name">sorting</div>
                    <div class="fontclass">#icon-sorting</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-storage"></use>
                    </svg>
                    <div class="name">storage</div>
                    <div class="fontclass">#icon-storage</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-store"></use>
                    </svg>
                    <div class="name">store</div>
                    <div class="fontclass">#icon-store</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-tag-subscript"></use>
                    </svg>
                    <div class="name">tag-subscript</div>
                    <div class="fontclass">#icon-tag-subscript</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-tag-selected"></use>
                    </svg>
                    <div class="name">tag-selected</div>
                    <div class="fontclass">#icon-tag-selected</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-table"></use>
                    </svg>
                    <div class="name">table</div>
                    <div class="fontclass">#icon-table</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-survey"></use>
                    </svg>
                    <div class="name">survey</div>
                    <div class="fontclass">#icon-survey</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-sync"></use>
                    </svg>
                    <div class="name">sync</div>
                    <div class="fontclass">#icon-sync</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-tag"></use>
                    </svg>
                    <div class="name">tag</div>
                    <div class="fontclass">#icon-tag</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-task"></use>
                    </svg>
                    <div class="name">task</div>
                    <div class="fontclass">#icon-task</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-top"></use>
                    </svg>
                    <div class="name">top</div>
                    <div class="fontclass">#icon-top</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-time"></use>
                    </svg>
                    <div class="name">time</div>
                    <div class="fontclass">#icon-time</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-transfer-station"></use>
                    </svg>
                    <div class="name">transfer-station</div>
                    <div class="fontclass">#icon-transfer-station</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-text"></use>
                    </svg>
                    <div class="name">text</div>
                    <div class="fontclass">#icon-text</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-trend-chart"></use>
                    </svg>
                    <div class="name">trend-chart</div>
                    <div class="fontclass">#icon-trend-chart</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-template"></use>
                    </svg>
                    <div class="name">template</div>
                    <div class="fontclass">#icon-template</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-unlock"></use>
                    </svg>
                    <div class="name">unlock</div>
                    <div class="fontclass">#icon-unlock</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-upload"></use>
                    </svg>
                    <div class="name">upload</div>
                    <div class="fontclass">#icon-upload</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-unsatisfy"></use>
                    </svg>
                    <div class="name">unsatisfy</div>
                    <div class="fontclass">#icon-unsatisfy</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-unseen"></use>
                    </svg>
                    <div class="name">unseen</div>
                    <div class="fontclass">#icon-unseen</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-user-r"></use>
                    </svg>
                    <div class="name">user-r</div>
                    <div class="fontclass">#icon-user-r</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-user"></use>
                    </svg>
                    <div class="name">user</div>
                    <div class="fontclass">#icon-user</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-usually"></use>
                    </svg>
                    <div class="name">usually</div>
                    <div class="fontclass">#icon-usually</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-vedio"></use>
                    </svg>
                    <div class="name">vedio</div>
                    <div class="fontclass">#icon-vedio</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-vertical-expansion"></use>
                    </svg>
                    <div class="name">vertical-expansion</div>
                    <div class="fontclass">#icon-vertical-expansion</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-vertical-retraction"></use>
                    </svg>
                    <div class="name">vertical-retraction</div>
                    <div class="fontclass">#icon-vertical-retraction</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-visible"></use>
                    </svg>
                    <div class="name">visible</div>
                    <div class="fontclass">#icon-visible</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-view-list"></use>
                    </svg>
                    <div class="name">view-list</div>
                    <div class="fontclass">#icon-view-list</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-volume"></use>
                    </svg>
                    <div class="name">volume</div>
                    <div class="fontclass">#icon-volume</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-view-matrix"></use>
                    </svg>
                    <div class="name">view-matrix</div>
                    <div class="fontclass">#icon-view-matrix</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-volumeopen"></use>
                    </svg>
                    <div class="name">volumeopen</div>
                    <div class="fontclass">#icon-volumeopen</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-wallet"></use>
                    </svg>
                    <div class="name">wallet</div>
                    <div class="fontclass">#icon-wallet</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-wave"></use>
                    </svg>
                    <div class="name">wave</div>
                    <div class="fontclass">#icon-wave</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-warehouse"></use>
                    </svg>
                    <div class="name">warehouse</div>
                    <div class="fontclass">#icon-warehouse</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-word"></use>
                    </svg>
                    <div class="name">word</div>
                    <div class="fontclass">#icon-word</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-column-o"></use>
                    </svg>
                    <div class="name">3column-o</div>
                    <div class="fontclass">#icon-column-o</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-add-o"></use>
                    </svg>
                    <div class="name">add-o</div>
                    <div class="fontclass">#icon-add-o</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-column-o1"></use>
                    </svg>
                    <div class="name">4column-o</div>
                    <div class="fontclass">#icon-column-o1</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-add-s-o"></use>
                    </svg>
                    <div class="name">add-s-o</div>
                    <div class="fontclass">#icon-add-s-o</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-add-r-o"></use>
                    </svg>
                    <div class="name">add-r-o</div>
                    <div class="fontclass">#icon-add-r-o</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-air-drop-o"></use>
                    </svg>
                    <div class="name">air-drop-o</div>
                    <div class="fontclass">#icon-air-drop-o</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-app-o"></use>
                    </svg>
                    <div class="name">app-o</div>
                    <div class="fontclass">#icon-app-o</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-arrow-double-right-o"></use>
                    </svg>
                    <div class="name">arrow-double-right-o</div>
                    <div class="fontclass">#icon-arrow-double-right-o</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-also-loan-o"></use>
                    </svg>
                    <div class="name">also-loan-o</div>
                    <div class="fontclass">#icon-also-loan-o</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-air-o"></use>
                    </svg>
                    <div class="name">air-o</div>
                    <div class="fontclass">#icon-air-o</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-arrow-double-left-o"></use>
                    </svg>
                    <div class="name">arrow-double-left-o</div>
                    <div class="fontclass">#icon-arrow-double-left-o</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-ascending-o"></use>
                    </svg>
                    <div class="name">ascending-o</div>
                    <div class="fontclass">#icon-ascending-o</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-atm-o"></use>
                    </svg>
                    <div class="name">atm-o</div>
                    <div class="fontclass">#icon-atm-o</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-back-o"></use>
                    </svg>
                    <div class="name">back-o</div>
                    <div class="fontclass">#icon-back-o</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-attendance-o"></use>
                    </svg>
                    <div class="name">attendance-o</div>
                    <div class="fontclass">#icon-attendance-o</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-atm-away-o"></use>
                    </svg>
                    <div class="name">atm-away-o</div>
                    <div class="fontclass">#icon-atm-away-o</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-back-r-o"></use>
                    </svg>
                    <div class="name">back-r-o</div>
                    <div class="fontclass">#icon-back-r-o</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-bad-o"></use>
                    </svg>
                    <div class="name">bad-o</div>
                    <div class="fontclass">#icon-bad-o</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-bill-o"></use>
                    </svg>
                    <div class="name">bill-o</div>
                    <div class="fontclass">#icon-bill-o</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-bank-card-o"></use>
                    </svg>
                    <div class="name">bank-card-o</div>
                    <div class="fontclass">#icon-bank-card-o</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-bar-chart-o"></use>
                    </svg>
                    <div class="name">bar-chart-o</div>
                    <div class="fontclass">#icon-bar-chart-o</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-box-o"></use>
                    </svg>
                    <div class="name">box-o</div>
                    <div class="fontclass">#icon-box-o</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-business-o"></use>
                    </svg>
                    <div class="name">business-o</div>
                    <div class="fontclass">#icon-business-o</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-bad-r-o"></use>
                    </svg>
                    <div class="name">bad-r-o</div>
                    <div class="fontclass">#icon-bad-r-o</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-businesscard-o"></use>
                    </svg>
                    <div class="name">businesscard-o</div>
                    <div class="fontclass">#icon-businesscard-o</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-building-o"></use>
                    </svg>
                    <div class="name">building-o</div>
                    <div class="fontclass">#icon-building-o</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-calculator-o"></use>
                    </svg>
                    <div class="name">calculator-o</div>
                    <div class="fontclass">#icon-calculator-o</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-camera-o"></use>
                    </svg>
                    <div class="name">camera-o</div>
                    <div class="fontclass">#icon-camera-o</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-cangneishicao-o"></use>
                    </svg>
                    <div class="name">cangneishicao-o</div>
                    <div class="fontclass">#icon-cangneishicao-o</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-car-o"></use>
                    </svg>
                    <div class="name">car-o</div>
                    <div class="fontclass">#icon-car-o</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-calendar-o"></use>
                    </svg>
                    <div class="name">calendar-o</div>
                    <div class="fontclass">#icon-calendar-o</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-chat-o"></use>
                    </svg>
                    <div class="name">chat-o</div>
                    <div class="fontclass">#icon-chat-o</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-checkbox-selected-o"></use>
                    </svg>
                    <div class="name">checkbox-selected-o</div>
                    <div class="fontclass">#icon-checkbox-selected-o</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-checkbox-o"></use>
                    </svg>
                    <div class="name">checkbox-o</div>
                    <div class="fontclass">#icon-checkbox-o</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-clock-o"></use>
                    </svg>
                    <div class="name">clock-o</div>
                    <div class="fontclass">#icon-clock-o</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-check-o"></use>
                    </svg>
                    <div class="name">check-o</div>
                    <div class="fontclass">#icon-check-o</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-Chinese-o"></use>
                    </svg>
                    <div class="name">Chinese-o</div>
                    <div class="fontclass">#icon-Chinese-o</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-close-o"></use>
                    </svg>
                    <div class="name">close-o</div>
                    <div class="fontclass">#icon-close-o</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-commodity-o"></use>
                    </svg>
                    <div class="name">commodity-o</div>
                    <div class="fontclass">#icon-commodity-o</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-complain-o"></use>
                    </svg>
                    <div class="name">complain-o</div>
                    <div class="fontclass">#icon-complain-o</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-compare-o"></use>
                    </svg>
                    <div class="name">compare-o</div>
                    <div class="fontclass">#icon-compare-o</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-compass-o"></use>
                    </svg>
                    <div class="name">compass-o</div>
                    <div class="fontclass">#icon-compass-o</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-complete-o"></use>
                    </svg>
                    <div class="name">complete-o</div>
                    <div class="fontclass">#icon-complete-o</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-complete-r-o"></use>
                    </svg>
                    <div class="name">complete-r-o</div>
                    <div class="fontclass">#icon-complete-r-o</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-copy-o"></use>
                    </svg>
                    <div class="name">copy-o</div>
                    <div class="fontclass">#icon-copy-o</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-courier-o"></use>
                    </svg>
                    <div class="name">courier-o</div>
                    <div class="fontclass">#icon-courier-o</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-CSR-o"></use>
                    </svg>
                    <div class="name">CSR-o</div>
                    <div class="fontclass">#icon-CSR-o</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-create-bill-o"></use>
                    </svg>
                    <div class="name">create-bill-o</div>
                    <div class="fontclass">#icon-create-bill-o</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-colthes-o"></use>
                    </svg>
                    <div class="name">colthes-o</div>
                    <div class="fontclass">#icon-colthes-o</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-cut-o"></use>
                    </svg>
                    <div class="name">cut-o</div>
                    <div class="fontclass">#icon-cut-o</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-delete-o"></use>
                    </svg>
                    <div class="name">delete-o</div>
                    <div class="fontclass">#icon-delete-o</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-dashboard-o"></use>
                    </svg>
                    <div class="name">dashboard-o</div>
                    <div class="fontclass">#icon-dashboard-o</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-descending-o"></use>
                    </svg>
                    <div class="name">descending-o</div>
                    <div class="fontclass">#icon-descending-o</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-delivery-o"></use>
                    </svg>
                    <div class="name">delivery-o</div>
                    <div class="fontclass">#icon-delivery-o</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-dialog-o"></use>
                    </svg>
                    <div class="name">dialog-o</div>
                    <div class="fontclass">#icon-dialog-o</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-customs-o"></use>
                    </svg>
                    <div class="name">customs-o</div>
                    <div class="fontclass">#icon-customs-o</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-diamond-o"></use>
                    </svg>
                    <div class="name">diamond-o</div>
                    <div class="fontclass">#icon-diamond-o</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-dollar-o"></use>
                    </svg>
                    <div class="name">dollar-o</div>
                    <div class="fontclass">#icon-dollar-o</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-ding-o"></use>
                    </svg>
                    <div class="name">ding-o</div>
                    <div class="fontclass">#icon-ding-o</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-download-o"></use>
                    </svg>
                    <div class="name">download-o</div>
                    <div class="fontclass">#icon-download-o</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-duihua-o"></use>
                    </svg>
                    <div class="name">duihua-o</div>
                    <div class="fontclass">#icon-duihua-o</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-edit-o"></use>
                    </svg>
                    <div class="name">edit-o</div>
                    <div class="fontclass">#icon-edit-o</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-error-r-o"></use>
                    </svg>
                    <div class="name">error-r-o</div>
                    <div class="fontclass">#icon-error-r-o</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-electronics-o"></use>
                    </svg>
                    <div class="name">electronics-o</div>
                    <div class="fontclass">#icon-electronics-o</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-enclosure-o"></use>
                    </svg>
                    <div class="name">enclosure-o</div>
                    <div class="fontclass">#icon-enclosure-o</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-English-o"></use>
                    </svg>
                    <div class="name">English-o</div>
                    <div class="fontclass">#icon-English-o</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-drop-o"></use>
                    </svg>
                    <div class="name">drop-o</div>
                    <div class="fontclass">#icon-drop-o</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-error-s-o"></use>
                    </svg>
                    <div class="name">error-s-o</div>
                    <div class="fontclass">#icon-error-s-o</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-exchange-o"></use>
                    </svg>
                    <div class="name">exchange-o</div>
                    <div class="fontclass">#icon-exchange-o</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-exclamatory-mark-t-o"></use>
                    </svg>
                    <div class="name">exclamatory-mark-t-o</div>
                    <div class="fontclass">#icon-exclamatory-mark-t-o</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-exclamatory-mark-r-o"></use>
                    </svg>
                    <div class="name">exclamatory-mark-r-o</div>
                    <div class="fontclass">#icon-exclamatory-mark-r-o</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-exclamatory-mark-o"></use>
                    </svg>
                    <div class="name">exclamatory-mark-o</div>
                    <div class="fontclass">#icon-exclamatory-mark-o</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-extend-o"></use>
                    </svg>
                    <div class="name">extend-o</div>
                    <div class="fontclass">#icon-extend-o</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-exit-fullscreen-o"></use>
                    </svg>
                    <div class="name">exit-fullscreen-o</div>
                    <div class="fontclass">#icon-exit-fullscreen-o</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-filter-o"></use>
                    </svg>
                    <div class="name">filter-o</div>
                    <div class="fontclass">#icon-filter-o</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-first-page-o"></use>
                    </svg>
                    <div class="name">first-page-o</div>
                    <div class="fontclass">#icon-first-page-o</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-flash-lamp-auto-o"></use>
                    </svg>
                    <div class="name">flash-lamp-auto-o</div>
                    <div class="fontclass">#icon-flash-lamp-auto-o</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-extend-r-o"></use>
                    </svg>
                    <div class="name">extend-r-o</div>
                    <div class="fontclass">#icon-extend-r-o</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-favorites-o"></use>
                    </svg>
                    <div class="name">favorites-o</div>
                    <div class="fontclass">#icon-favorites-o</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-finance-o"></use>
                    </svg>
                    <div class="name">finance-o</div>
                    <div class="fontclass">#icon-finance-o</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-flash-lamp-o"></use>
                    </svg>
                    <div class="name">flash-lamp-o</div>
                    <div class="fontclass">#icon-flash-lamp-o</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-folder-o"></use>
                    </svg>
                    <div class="name">folder-o</div>
                    <div class="fontclass">#icon-folder-o</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-flash-lamp-off-o"></use>
                    </svg>
                    <div class="name">flash-lamp-off-o</div>
                    <div class="fontclass">#icon-flash-lamp-off-o</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-forward-o"></use>
                    </svg>
                    <div class="name">forward-o</div>
                    <div class="fontclass">#icon-forward-o</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-forbidden-o"></use>
                    </svg>
                    <div class="name">forbidden-o</div>
                    <div class="fontclass">#icon-forbidden-o</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-forward-r-o"></use>
                    </svg>
                    <div class="name">forward-r-o</div>
                    <div class="fontclass">#icon-forward-r-o</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-free-o"></use>
                    </svg>
                    <div class="name">free-o</div>
                    <div class="fontclass">#icon-free-o</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-good-o"></use>
                    </svg>
                    <div class="name">good-o</div>
                    <div class="fontclass">#icon-good-o</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-fullscreen-o"></use>
                    </svg>
                    <div class="name">fullscreen-o</div>
                    <div class="fontclass">#icon-fullscreen-o</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-forward-sorting-o"></use>
                    </svg>
                    <div class="name">forward-sorting-o</div>
                    <div class="fontclass">#icon-forward-sorting-o</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-gifts-o"></use>
                    </svg>
                    <div class="name">gifts-o</div>
                    <div class="fontclass">#icon-gifts-o</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-good-r-o"></use>
                    </svg>
                    <div class="name">good-r-o</div>
                    <div class="fontclass">#icon-good-r-o</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-home-o"></use>
                    </svg>
                    <div class="name">home-o</div>
                    <div class="fontclass">#icon-home-o</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-group-o"></use>
                    </svg>
                    <div class="name">group-o</div>
                    <div class="fontclass">#icon-group-o</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-history-o"></use>
                    </svg>
                    <div class="name">history-o</div>
                    <div class="fontclass">#icon-history-o</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-horizontal-retractio1"></use>
                    </svg>
                    <div class="name">horizontal-retractio</div>
                    <div class="fontclass">#icon-horizontal-retractio1</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-horizontal-expansion1"></use>
                    </svg>
                    <div class="name">horizontal-expansion</div>
                    <div class="fontclass">#icon-horizontal-expansion1</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-horn-o"></use>
                    </svg>
                    <div class="name">horn-o</div>
                    <div class="fontclass">#icon-horn-o</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-image-text-o"></use>
                    </svg>
                    <div class="name">image-text-o</div>
                    <div class="fontclass">#icon-image-text-o</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-image-o"></use>
                    </svg>
                    <div class="name">image-o</div>
                    <div class="fontclass">#icon-image-o</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-info-o"></use>
                    </svg>
                    <div class="name">info-o</div>
                    <div class="fontclass">#icon-info-o</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-increase-o"></use>
                    </svg>
                    <div class="name">increase-o</div>
                    <div class="fontclass">#icon-increase-o</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-info-r-o"></use>
                    </svg>
                    <div class="name">info-r-o</div>
                    <div class="fontclass">#icon-info-r-o</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-import-o"></use>
                    </svg>
                    <div class="name">import-o</div>
                    <div class="fontclass">#icon-import-o</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-information-o"></use>
                    </svg>
                    <div class="name">information-o</div>
                    <div class="fontclass">#icon-information-o</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-key-o"></use>
                    </svg>
                    <div class="name">key-o</div>
                    <div class="fontclass">#icon-key-o</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-keyboard-o"></use>
                    </svg>
                    <div class="name">keyboard-o</div>
                    <div class="fontclass">#icon-keyboard-o</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-international-o"></use>
                    </svg>
                    <div class="name">international-o</div>
                    <div class="fontclass">#icon-international-o</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-last-page-o"></use>
                    </svg>
                    <div class="name">last-page-o</div>
                    <div class="fontclass">#icon-last-page-o</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-left-o"></use>
                    </svg>
                    <div class="name">left-o</div>
                    <div class="fontclass">#icon-left-o</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-lefy-exchange-o"></use>
                    </svg>
                    <div class="name">lefy-exchange-o</div>
                    <div class="fontclass">#icon-lefy-exchange-o</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-left-sorting-o"></use>
                    </svg>
                    <div class="name">left-sorting-o</div>
                    <div class="fontclass">#icon-left-sorting-o</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-letter-o"></use>
                    </svg>
                    <div class="name">letter-o</div>
                    <div class="fontclass">#icon-letter-o</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-light-o"></use>
                    </svg>
                    <div class="name">light-o</div>
                    <div class="fontclass">#icon-light-o</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-like-o"></use>
                    </svg>
                    <div class="name">like-o</div>
                    <div class="fontclass">#icon-like-o</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-line-o"></use>
                    </svg>
                    <div class="name">line-o</div>
                    <div class="fontclass">#icon-line-o</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-link-o"></use>
                    </svg>
                    <div class="name">link-o</div>
                    <div class="fontclass">#icon-link-o</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-load-o"></use>
                    </svg>
                    <div class="name">load-o</div>
                    <div class="fontclass">#icon-load-o</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-loading--o"></use>
                    </svg>
                    <div class="name">loading-1-o</div>
                    <div class="fontclass">#icon-loading--o</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-loading--o1"></use>
                    </svg>
                    <div class="name">loading-2-o</div>
                    <div class="fontclass">#icon-loading--o1</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-loan-o"></use>
                    </svg>
                    <div class="name">loan-o</div>
                    <div class="fontclass">#icon-loan-o</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-location-o"></use>
                    </svg>
                    <div class="name">location-o</div>
                    <div class="fontclass">#icon-location-o</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-locker-o"></use>
                    </svg>
                    <div class="name">locker-o</div>
                    <div class="fontclass">#icon-locker-o</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-logistics-o"></use>
                    </svg>
                    <div class="name">logistics-o</div>
                    <div class="fontclass">#icon-logistics-o</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-lock-o"></use>
                    </svg>
                    <div class="name">lock-o</div>
                    <div class="fontclass">#icon-lock-o</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-macbook-o"></use>
                    </svg>
                    <div class="name">macbook-o</div>
                    <div class="fontclass">#icon-macbook-o</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-map--o"></use>
                    </svg>
                    <div class="name">map-1-o</div>
                    <div class="fontclass">#icon-map--o</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-logout-o"></use>
                    </svg>
                    <div class="name">logout-o</div>
                    <div class="fontclass">#icon-logout-o</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-map--o1"></use>
                    </svg>
                    <div class="name">map-2-o</div>
                    <div class="fontclass">#icon-map--o1</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-minus-o"></use>
                    </svg>
                    <div class="name">minus-o</div>
                    <div class="fontclass">#icon-minus-o</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-mic-o"></use>
                    </svg>
                    <div class="name">mic-o</div>
                    <div class="fontclass">#icon-mic-o</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-mobile-Phone-o"></use>
                    </svg>
                    <div class="name">mobile-Phone-o</div>
                    <div class="fontclass">#icon-mobile-Phone-o</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-minus-r-o"></use>
                    </svg>
                    <div class="name">minus-r-o</div>
                    <div class="fontclass">#icon-minus-r-o</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-minus-s-o"></use>
                    </svg>
                    <div class="name">minus-s-o</div>
                    <div class="fontclass">#icon-minus-s-o</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-money-bill-o"></use>
                    </svg>
                    <div class="name">money-bill-o</div>
                    <div class="fontclass">#icon-money-bill-o</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-money-o"></use>
                    </svg>
                    <div class="name">money-o</div>
                    <div class="fontclass">#icon-money-o</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-moneys-o"></use>
                    </svg>
                    <div class="name">moneys-o</div>
                    <div class="fontclass">#icon-moneys-o</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-monitor-o"></use>
                    </svg>
                    <div class="name">monitor-o</div>
                    <div class="fontclass">#icon-monitor-o</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-more-vertical-o"></use>
                    </svg>
                    <div class="name">more-vertical-o</div>
                    <div class="fontclass">#icon-more-vertical-o</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-nav-list-o"></use>
                    </svg>
                    <div class="name">nav-list-o</div>
                    <div class="fontclass">#icon-nav-list-o</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-navigation-o"></use>
                    </svg>
                    <div class="name">navigation-o</div>
                    <div class="fontclass">#icon-navigation-o</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-network-o"></use>
                    </svg>
                    <div class="name">network-o</div>
                    <div class="fontclass">#icon-network-o</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-more-transverse-o"></use>
                    </svg>
                    <div class="name">more-transverse-o</div>
                    <div class="fontclass">#icon-more-transverse-o</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-news-o"></use>
                    </svg>
                    <div class="name">news-o</div>
                    <div class="fontclass">#icon-news-o</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-no-attendance-o"></use>
                    </svg>
                    <div class="name">no-attendance-o</div>
                    <div class="fontclass">#icon-no-attendance-o</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-notice-o"></use>
                    </svg>
                    <div class="name">notice-o</div>
                    <div class="fontclass">#icon-notice-o</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-not-sign-o"></use>
                    </svg>
                    <div class="name">not-sign-o</div>
                    <div class="fontclass">#icon-not-sign-o</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-open-package-o"></use>
                    </svg>
                    <div class="name">open-package-o</div>
                    <div class="fontclass">#icon-open-package-o</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-office-o"></use>
                    </svg>
                    <div class="name">office-o</div>
                    <div class="fontclass">#icon-office-o</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-operation-o"></use>
                    </svg>
                    <div class="name">operation-o</div>
                    <div class="fontclass">#icon-operation-o</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-organization-o"></use>
                    </svg>
                    <div class="name">organization-o</div>
                    <div class="fontclass">#icon-organization-o</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-package-o"></use>
                    </svg>
                    <div class="name">package-o</div>
                    <div class="fontclass">#icon-package-o</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-paly-o"></use>
                    </svg>
                    <div class="name">paly-o</div>
                    <div class="fontclass">#icon-paly-o</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-pause-o"></use>
                    </svg>
                    <div class="name">pause-o</div>
                    <div class="fontclass">#icon-pause-o</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-paste-o"></use>
                    </svg>
                    <div class="name">paste-o</div>
                    <div class="fontclass">#icon-paste-o</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-pie-chart-o"></use>
                    </svg>
                    <div class="name">pie-chart-o</div>
                    <div class="fontclass">#icon-pie-chart-o</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-PDA-o"></use>
                    </svg>
                    <div class="name">PDA-o</div>
                    <div class="fontclass">#icon-PDA-o</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-phone-r-o"></use>
                    </svg>
                    <div class="name">phone-r-o</div>
                    <div class="fontclass">#icon-phone-r-o</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-ppt-o"></use>
                    </svg>
                    <div class="name">ppt-o</div>
                    <div class="fontclass">#icon-ppt-o</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-power-o"></use>
                    </svg>
                    <div class="name">power-o</div>
                    <div class="fontclass">#icon-power-o</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-position-o"></use>
                    </svg>
                    <div class="name">position-o</div>
                    <div class="fontclass">#icon-position-o</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-prine-o"></use>
                    </svg>
                    <div class="name">prine-o</div>
                    <div class="fontclass">#icon-prine-o</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-quality-o"></use>
                    </svg>
                    <div class="name">quality-o</div>
                    <div class="fontclass">#icon-quality-o</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-process-o"></use>
                    </svg>
                    <div class="name">process-o</div>
                    <div class="fontclass">#icon-process-o</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-question-mark-o"></use>
                    </svg>
                    <div class="name">question-mark-o</div>
                    <div class="fontclass">#icon-question-mark-o</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-question-mark-r-o"></use>
                    </svg>
                    <div class="name">question-mark-r-o</div>
                    <div class="fontclass">#icon-question-mark-r-o</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-radar-o"></use>
                    </svg>
                    <div class="name">radar-o</div>
                    <div class="fontclass">#icon-radar-o</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-Raidobox-o"></use>
                    </svg>
                    <div class="name">Raidobox-o</div>
                    <div class="fontclass">#icon-Raidobox-o</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-Raidobox-selectedRai1"></use>
                    </svg>
                    <div class="name">Raidobox-selectedRai</div>
                    <div class="fontclass">#icon-Raidobox-selectedRai1</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-red-packet-o"></use>
                    </svg>
                    <div class="name">red-packet-o</div>
                    <div class="fontclass">#icon-red-packet-o</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-refresh-o"></use>
                    </svg>
                    <div class="name">refresh-o</div>
                    <div class="fontclass">#icon-refresh-o</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-register-o"></use>
                    </svg>
                    <div class="name">register-o</div>
                    <div class="fontclass">#icon-register-o</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-refund-o"></use>
                    </svg>
                    <div class="name">refund-o</div>
                    <div class="fontclass">#icon-refund-o</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-resource-o"></use>
                    </svg>
                    <div class="name">resource-o</div>
                    <div class="fontclass">#icon-resource-o</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-relationship-o"></use>
                    </svg>
                    <div class="name">relationship-o</div>
                    <div class="fontclass">#icon-relationship-o</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-reverse-sorting-o"></use>
                    </svg>
                    <div class="name">reverse-sorting-o</div>
                    <div class="fontclass">#icon-reverse-sorting-o</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-right-exchange-o"></use>
                    </svg>
                    <div class="name">right-exchange-o</div>
                    <div class="fontclass">#icon-right-exchange-o</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-rise-o"></use>
                    </svg>
                    <div class="name">rise-o</div>
                    <div class="fontclass">#icon-rise-o</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-rule-o"></use>
                    </svg>
                    <div class="name">rule-o</div>
                    <div class="fontclass">#icon-rule-o</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-right-o"></use>
                    </svg>
                    <div class="name">right-o</div>
                    <div class="fontclass">#icon-right-o</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-right-sorting-o"></use>
                    </svg>
                    <div class="name">right-sorting-o</div>
                    <div class="fontclass">#icon-right-sorting-o</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-RMB-o"></use>
                    </svg>
                    <div class="name">RMB-o</div>
                    <div class="fontclass">#icon-RMB-o</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-safe-o"></use>
                    </svg>
                    <div class="name">safe-o</div>
                    <div class="fontclass">#icon-safe-o</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-scan-o"></use>
                    </svg>
                    <div class="name">scan-o</div>
                    <div class="fontclass">#icon-scan-o</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-satisfy-o"></use>
                    </svg>
                    <div class="name">satisfy-o</div>
                    <div class="fontclass">#icon-satisfy-o</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-save-o"></use>
                    </svg>
                    <div class="name">save-o</div>
                    <div class="fontclass">#icon-save-o</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-screwdriver-o"></use>
                    </svg>
                    <div class="name">screwdriver-o</div>
                    <div class="fontclass">#icon-screwdriver-o</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-schedule-o"></use>
                    </svg>
                    <div class="name">schedule-o</div>
                    <div class="fontclass">#icon-schedule-o</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-search-o"></use>
                    </svg>
                    <div class="name">search-o</div>
                    <div class="fontclass">#icon-search-o</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-security-o"></use>
                    </svg>
                    <div class="name">security-o</div>
                    <div class="fontclass">#icon-security-o</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-settlement-o"></use>
                    </svg>
                    <div class="name">settlement-o</div>
                    <div class="fontclass">#icon-settlement-o</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-service-o"></use>
                    </svg>
                    <div class="name">service-o</div>
                    <div class="fontclass">#icon-service-o</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-setting-o"></use>
                    </svg>
                    <div class="name">setting-o</div>
                    <div class="fontclass">#icon-setting-o</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-setup-o"></use>
                    </svg>
                    <div class="name">setup-o</div>
                    <div class="fontclass">#icon-setup-o</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-shoppingbag-o"></use>
                    </svg>
                    <div class="name">shoppingbag-o</div>
                    <div class="fontclass">#icon-shoppingbag-o</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-share-o"></use>
                    </svg>
                    <div class="name">share-o</div>
                    <div class="fontclass">#icon-share-o</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-shopping-cart-o"></use>
                    </svg>
                    <div class="name">shopping-cart-o</div>
                    <div class="fontclass">#icon-shopping-cart-o</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-shield-o"></use>
                    </svg>
                    <div class="name">shield-o</div>
                    <div class="fontclass">#icon-shield-o</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-shrink-r-o"></use>
                    </svg>
                    <div class="name">shrink-r-o</div>
                    <div class="fontclass">#icon-shrink-r-o</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-shrink-o"></use>
                    </svg>
                    <div class="name">shrink-o</div>
                    <div class="fontclass">#icon-shrink-o</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-signed-o"></use>
                    </svg>
                    <div class="name">signed-o</div>
                    <div class="fontclass">#icon-signed-o</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-similar-product-o"></use>
                    </svg>
                    <div class="name">similar-product-o</div>
                    <div class="fontclass">#icon-similar-product-o</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-sort-o"></use>
                    </svg>
                    <div class="name">sort-o</div>
                    <div class="fontclass">#icon-sort-o</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-slide-o"></use>
                    </svg>
                    <div class="name">slide-o</div>
                    <div class="fontclass">#icon-slide-o</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-sorting-o"></use>
                    </svg>
                    <div class="name">sorting-o</div>
                    <div class="fontclass">#icon-sorting-o</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-stock-o"></use>
                    </svg>
                    <div class="name">stock-o</div>
                    <div class="fontclass">#icon-stock-o</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-stop-o"></use>
                    </svg>
                    <div class="name">stop-o</div>
                    <div class="fontclass">#icon-stop-o</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-standard-o"></use>
                    </svg>
                    <div class="name">standard-o</div>
                    <div class="fontclass">#icon-standard-o</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-storage-o"></use>
                    </svg>
                    <div class="name">storage-o</div>
                    <div class="fontclass">#icon-storage-o</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-survey-o"></use>
                    </svg>
                    <div class="name">survey-o</div>
                    <div class="fontclass">#icon-survey-o</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-store-o"></use>
                    </svg>
                    <div class="name">store-o</div>
                    <div class="fontclass">#icon-store-o</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-table-o"></use>
                    </svg>
                    <div class="name">table-o</div>
                    <div class="fontclass">#icon-table-o</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-tag-o"></use>
                    </svg>
                    <div class="name">tag-o</div>
                    <div class="fontclass">#icon-tag-o</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-tag-selected-o"></use>
                    </svg>
                    <div class="name">tag-selected-o</div>
                    <div class="fontclass">#icon-tag-selected-o</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-sync-o"></use>
                    </svg>
                    <div class="name">sync-o</div>
                    <div class="fontclass">#icon-sync-o</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-task-o"></use>
                    </svg>
                    <div class="name">task-o</div>
                    <div class="fontclass">#icon-task-o</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-tag-subscript-o"></use>
                    </svg>
                    <div class="name">tag-subscript-o</div>
                    <div class="fontclass">#icon-tag-subscript-o</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-template-o"></use>
                    </svg>
                    <div class="name">template-o</div>
                    <div class="fontclass">#icon-template-o</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-text-o"></use>
                    </svg>
                    <div class="name">text-o</div>
                    <div class="fontclass">#icon-text-o</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-time-o"></use>
                    </svg>
                    <div class="name">time-o</div>
                    <div class="fontclass">#icon-time-o</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-top-o"></use>
                    </svg>
                    <div class="name">top-o</div>
                    <div class="fontclass">#icon-top-o</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-transfer-station-o"></use>
                    </svg>
                    <div class="name">transfer-station-o</div>
                    <div class="fontclass">#icon-transfer-station-o</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-trend-chart-o"></use>
                    </svg>
                    <div class="name">trend-chart-o</div>
                    <div class="fontclass">#icon-trend-chart-o</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-unlock-o"></use>
                    </svg>
                    <div class="name">unlock-o</div>
                    <div class="fontclass">#icon-unlock-o</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-unsatisfy-o"></use>
                    </svg>
                    <div class="name">unsatisfy-o</div>
                    <div class="fontclass">#icon-unsatisfy-o</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-user-o"></use>
                    </svg>
                    <div class="name">user-o</div>
                    <div class="fontclass">#icon-user-o</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-unseen-o"></use>
                    </svg>
                    <div class="name">unseen-o</div>
                    <div class="fontclass">#icon-unseen-o</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-upload-o"></use>
                    </svg>
                    <div class="name">upload-o</div>
                    <div class="fontclass">#icon-upload-o</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-usually-o"></use>
                    </svg>
                    <div class="name">usually-o</div>
                    <div class="fontclass">#icon-usually-o</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-vedio-o"></use>
                    </svg>
                    <div class="name">vedio-o</div>
                    <div class="fontclass">#icon-vedio-o</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-user-r-o"></use>
                    </svg>
                    <div class="name">user-r-o</div>
                    <div class="fontclass">#icon-user-r-o</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-view-list-o"></use>
                    </svg>
                    <div class="name">view-list-o</div>
                    <div class="fontclass">#icon-view-list-o</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-vertical-expansion-o"></use>
                    </svg>
                    <div class="name">vertical-expansion-o</div>
                    <div class="fontclass">#icon-vertical-expansion-o</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-vertical-retraction-"></use>
                    </svg>
                    <div class="name">vertical-retraction-</div>
                    <div class="fontclass">#icon-vertical-retraction-</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-volume-o"></use>
                    </svg>
                    <div class="name">volume-o</div>
                    <div class="fontclass">#icon-volume-o</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-view-matrix-o"></use>
                    </svg>
                    <div class="name">view-matrix-o</div>
                    <div class="fontclass">#icon-view-matrix-o</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-visible-o"></use>
                    </svg>
                    <div class="name">visible-o</div>
                    <div class="fontclass">#icon-visible-o</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-wallet-o"></use>
                    </svg>
                    <div class="name">wallet-o</div>
                    <div class="fontclass">#icon-wallet-o</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-volumeopen-o"></use>
                    </svg>
                    <div class="name">volumeopen-o</div>
                    <div class="fontclass">#icon-volumeopen-o</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-warehouse-o"></use>
                    </svg>
                    <div class="name">warehouse-o</div>
                    <div class="fontclass">#icon-warehouse-o</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-wave-o"></use>
                    </svg>
                    <div class="name">wave-o</div>
                    <div class="fontclass">#icon-wave-o</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-word-o"></use>
                    </svg>
                    <div class="name">word-o</div>
                    <div class="fontclass">#icon-word-o</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-arrow-down"></use>
                    </svg>
                    <div class="name">arrow-down</div>
                    <div class="fontclass">#icon-arrow-down</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-arrow-left"></use>
                    </svg>
                    <div class="name">arrow-left</div>
                    <div class="fontclass">#icon-arrow-left</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-arrow-right"></use>
                    </svg>
                    <div class="name">arrow-right</div>
                    <div class="fontclass">#icon-arrow-right</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-arrow-up"></use>
                    </svg>
                    <div class="name">arrow-up</div>
                    <div class="fontclass">#icon-arrow-up</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-arrow-down1"></use>
                    </svg>
                    <div class="name">arrow-down</div>
                    <div class="fontclass">#icon-arrow-down1</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-arrow-right1"></use>
                    </svg>
                    <div class="name">arrow-right</div>
                    <div class="fontclass">#icon-arrow-right1</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-arrow-left1"></use>
                    </svg>
                    <div class="name">arrow-left</div>
                    <div class="fontclass">#icon-arrow-left1</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-arrow-up1"></use>
                    </svg>
                    <div class="name">arrow-up</div>
                    <div class="fontclass">#icon-arrow-up1</div>
                </li>
            
        </ul>


        <h2 id="symbol-">symbol引用</h2>
        <hr>

        <p>这是一种全新的使用方式，应该说这才是未来的主流，也是平台目前推荐的用法。相关介绍可以参考这篇<a href="">文章</a>
        这种用法其实是做了一个svg的集合，与另外两种相比具有如下特点：</p>
        <ul>
          <li>支持多色图标了，不再受单色限制。</li>
          <li>通过一些技巧，支持像字体那样，通过<code>font-size</code>,<code>color</code>来调整样式。</li>
          <li>兼容性较差，支持 ie9+,及现代浏览器。</li>
          <li>浏览器渲染svg的性能一般，还不如png。</li>
        </ul>
        <p>使用步骤如下：</p>
        <h3 id="-symbol-">第一步：引入项目下面生成的symbol代码：</h3>
        <pre><code class="lang-js hljs javascript"><span class="hljs-comment">&lt;script src="./iconfont.js"&gt;&lt;/script&gt;</span></code></pre>
        <h3 id="-css-">第二步：加入通用css代码（引入一次就行）：</h3>
        <pre><code class="lang-js hljs javascript">&lt;style type=<span class="hljs-string">"text/css"</span>&gt;
.icon {
   width: <span class="hljs-number">1</span>em; height: <span class="hljs-number">1</span>em;
   vertical-align: <span class="hljs-number">-0.15</span>em;
   fill: currentColor;
   overflow: hidden;
}
&lt;<span class="hljs-regexp">/style&gt;</span></code></pre>
        <h3 id="-">第三步：挑选相应图标并获取类名，应用于页面：</h3>
        <pre><code class="lang-js hljs javascript">&lt;svg <span class="hljs-class"><span class="hljs-keyword">class</span></span>=<span class="hljs-string">"icon"</span> aria-hidden=<span class="hljs-string">"true"</span>&gt;<span class="xml"><span class="hljs-tag">
  &lt;<span class="hljs-name">use</span> <span class="hljs-attr">xlink:href</span>=<span class="hljs-string">"#icon-xxx"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">use</span>&gt;</span>
</span>&lt;<span class="hljs-regexp">/svg&gt;
        </span></code></pre>
    </div>
</body>
</html>
